<template id='text'>
    <div class="text">
        <input type="text" v-model="text" placeholder="图片内容">
        <input type="text" v-model="name" placeholder="图片名称">
        <button @click="draw">下载图片</button>
        <canvas class="canvas" id="canvas" width="1024" height="1024" v-show="1 == 2"></canvas>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
    name: '',
    components: {
    },
    // 定义属性
    data() {
        return {
            text: "",
            name: "",
        }
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
    },
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        draw() {
            let canvas = document.getElementById("canvas");
            let ctx = canvas.getContext("2d");
            canvas.width = 1024;
            canvas.height = 1024;
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.font = "30px Arial";
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillStyle = '#000000';
            ctx.fillText(this.text, canvas.width / 2, canvas.height / 2);
            let dataUrl = canvas.toDataURL('image/png');
            this.downLoad(dataUrl)
        },
        downLoad(url) {
            var oA = document.createElement('a')
            oA.download = this.name; // 设置下载的文件名，默认是'下载'
            oA.href = url;
            document.body.appendChild(oA);
            oA.click();
            oA.remove(); // 下载之后把创建的元素删除
            this.text = "";
            this.name = ""
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
.text {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>